<template>
  <div>
    <h1>Refs</h1>
    <ul>
      <li v-for="(v, index) of ss" :key="index">
        {{ index }}:
        <input ref="inputRef" type="text" :value="v" />
      </li>
    </ul>
    <button @click="() => focus(0)">0</button>
    <button @click="() => focus(1)">1</button>
    <button @click="() => focus(2)">2</button>
    <br />
    <p>
      指定 v-show 默认值为 false
      的组件在父组件创建时就会被创建并加载，并且不会被卸载，直到父组件被卸载。<br />
      指定 v-if 默认值为 false 的组件在父组件创建时不会被创建，并且会随之指定
      v-if 的值的改变而创建/销毁。
    </p>
    <sub-comp v-show="showSubComp" />
    <button @click="showSubComp = !showSubComp">switch</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import SubComp from "./components/SubComp.vue";

const ss = ["a", "b", "c"];

const inputRef = ref();
const showSubComp = ref(false);

onMounted(() => {
  console.log(inputRef.value.length);
});

function focus(cnt: number) {
  (<HTMLInputElement>inputRef.value[cnt]).focus();
}
</script>

<style scoped></style>
